<template>
    <div class="main">
      <h4>车辆维护和变更记录</h4>
      <hr />
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- 时间选择器 -->
        <el-form-item label="请选择时间">
          <el-date-picker
          v-model="formInline.date"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right">
          </el-date-picker>
        </el-form-item>

        <!-- 选择设备 -->
        <el-form-item label="选择设备">
          <el-input v-model="formInline.equipment" placeholder="请选择" readonly @click.native="dialogEquipmentVisible=true"></el-input>
        </el-form-item>

        <!-- 查询 -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>

        <!-- 导出 -->
        <el-form-item>
          <el-button type="primary" @click="exportExcel">导出</el-button>
        </el-form-item>
      </el-form>

      <!-- 数据表格 -->
      <div class="table-data">
        <el-table
          :data="tableData"
          stripe
          border
          height="500"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="60">
          </el-table-column>
          <el-table-column
            prop="no"
            label="设备号"
            width="160">
          </el-table-column>
          <el-table-column
            prop="company"
            label="所属公司"
            width="180">
          </el-table-column>
          <el-table-column
            prop="car"
            label="所属车辆"
            width="180">
          </el-table-column>
          <el-table-column
            prop="changeC"
            label="变更内容"
            width="180">
          </el-table-column>
          <el-table-column
            prop="changeT"
            label="变更时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="changeM"
            label="变更人"
            width="180">
          </el-table-column>
          <el-table-column
            prop="changeD"
            label="变更详情"
            width="180">
          </el-table-column>
        </el-table>
      </div>

      <!-- 选择设备 -->
      <el-dialog title="选择设备" :visible.sync="dialogEquipmentVisible" width="500px">
        <equipment-list @option-equipment="optionEquipment" :isDialog="true"></equipment-list>
      </el-dialog>
    </div>
</template>

<script>
import reportApi from '@/api/report'
import {export_json_to_excel} from '@/public/Export2Excel'
import EquipmentList from '@/views/equipmentList'

  export default {
    components: {EquipmentList},

    data() {
      return {
        formInline: {
          date: '',
          equipment: ''
        },
        tableData: [],
        dialogEquipmentVisible: false,
        // 时间选择器
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    methods: {
      onSubmit() {
        reportApi.getEighteenOfNine(this.formInline).then(response => {
          const resp = response.data
          if(resp.flag){
            this.tableData = resp.data.rows
          }else{
            this.$message({
              message: resp.message,
              type: 'warning'
            })
          }
        })
      },

      // 导出EXCEL表格
      exportExcel(){
            require.ensure([], () => {
            const tHeader = ['设备号', '所属公司', '所属车辆', '变更内容', '变更时间', '变更人', '变更详情']
            const filterVal = ['no', 'company', 'car', 'changeC', 'changeT', 'changeM', 'changeD']
            const list = this.tableData
            const data = this.formatJson(filterVal, list)
            export_json_to_excel(tHeader, data, '设备变更报表')
            })
        },
        formatJson(filterVal, jsonData){
            return jsonData.map(v => filterVal.map(j => v[j]))
        },

      optionEquipment(currentRow){
        console.log('parent', currentRow)
        console.log(currentRow.no)
        this.formInline.equipment = currentRow.no
        this.dialogEquipmentVisible = false
      },
    }
  };
</script>

<style scoped>
.main{
    position: absolute;
    left: 250px;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: auto;
}
hr{
  padding: 0;
  margin: 0;
}
.el-form{
  padding: 20px 10px 10px 10px;
  background-color: #eee;
}
.table-data{
  width: 100%;
  height: 500px;
  overflow-x: auto;
  overflow-y: auto;
}
</style>